<template>
    <!-- 图表 - 用户分布 -->
    <div>
        <!-- 头部导航 -->
        <el-header height="auto">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/Main/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><a>图表</a></el-breadcrumb-item>
                <el-breadcrumb-item>用户分布</el-breadcrumb-item>
            </el-breadcrumb>
            <el-dropdown placement="bottom">
                <span class="el-dropdown-link">
                    <img src="../../assets/img/default.jpg" alt="">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="goToIndex">首页</el-dropdown-item>
                    <el-dropdown-item @click.native="LogOUt">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <!-- 图表 -->
        <div :style="{ margin:'0 auto', width: '1152px', height: '450px', padding:'20px'}">
            <div id="container" :style="{width: '1152px', height: '450px'}" ref="chartsCon"></div>
        </div>
    </div>
</template>

<script>
export default{
    data(){ return { } },
    mounted(){
        this.drawLine();
    },
    methods:{
        /* 插入的图表 */
        drawLine(){
            // 基于准备好的 dom，初始化 echarts 实例
            let myChart = this.$echarts.init(document.getElementById('container'))
            // 绘制图表
            myChart.setOption({
                title : {
                    text: '用户分布',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['北京','上海','深圳','杭州','其他']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'北京'},
                            {value:310, name:'上海'},
                            {value:234, name:'深圳'},
                            {value:135, name:'杭州'},
                            {value:1548, name:'其他'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        },
        /* 跳转至首页 */
        goToIndex(){ this.$router.push({ path: '/Main/index' }) },
        /* 退出登录 */
        LogOUt(){ this.$router.push({ path: '/' }) }
    }
}
</script>
